<script setup>
    import { ref,computed } from 'vue'
    import { ElButton, ElCard, ElCarousel, ElCarouselItem, ElCol, ElRow, ElInput, ElDialog } from 'element-plus'
    import * as admin from '@/api/admin.js'
    import { WarnTriangleFilled } from '@element-plus/icons-vue';
    import {useRouter} from 'vue-router'
    import { ElMessage } from 'element-plus';
    const router = useRouter();
const inex_data = ref ('')
    // 定义数据
    const carouselItems = [
    { image: 'http://localhost:8080/xiaoqu.jpg' },
    { image: 'http://localhost:8080/xiaoqu1.jpg' },
    { image: 'http://localhost:8080/xiaoqu2.jpg' }
    ]

    const gongao = ref ([])
    const weixiu = ref ([])
    const tixing = ref ([])

    // const weixiu = [
    // { title: '维修通知1', content: '电梯故障修复', createTime: '2025-02-08' },
    // { title: '维修通知2', content: '小区供水维护', createTime: '2025-02-07' },
    // { title: '维修通知3', content: '草坪修整', createTime: '2025-02-06' }
    // ]

    // const tixing = [
    // { title: '安全提醒1', content: '雷暴天气', createTime: '2025-02-08' },
    // { title: '安全提醒2', content: '防火安全', createTime: '2025-02-07' },
    // { title: '安全提醒3', content: '公共区域禁烟', createTime: '2025-02-06' }
    // ]

    // 定义弹出框控制
    const messageDialogVisible = ref(false)
    const message = ref('')
    const detailDialogVisible = ref(false)
    const detailedInfo = ref('')
    const role_data = localStorage.getItem('role');
    // 方法
    const openLogin = () => {
    window.location.href = '/login'
    }

    const openMessageBoard = () => {
        messageDialogVisible.value = true
    }

    const submitMessage = async () => {
        const param = {
          messageText: message.value,
          userID: localStorage.getItem('userId')
        }
        console.log('留言提交：', message.value)
        const res = await admin.addMessageboard(param)
        if(res.code === 0){
          ElMessage.success('留言提交成功')
          messageDialogVisible.value = false
          message.value = ''
        }
        
    }

    const viewDetail = (title, item) => {
    detailedInfo.value = `${title} - ${item.title} - ${item.content} `
    detailDialogVisible.value = true
    }


    const articleList = async () => {
    let param = {
        currentPage: 1
    }
    const res = await admin.fingonggao(param)
    const value = res.data

    gongao.value = value.filter(item => item.status === '社区公告')
    weixiu.value = value.filter(item => item.status === '维修通知')
    tixing.value = value.filter(item => item.status === '安全提醒')

    console.log(gongao.value)
    console.log(weixiu.value)
    console.log(tixing.value)


}
const formatDate = (date) => {
  if (!date) {
    return '';
  }

  const d = new Date(date);

  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
  const day = String(d.getDate()).padStart(2, '0');

  const hours = String(d.getHours()).padStart(2, '0');
  const minutes = String(d.getMinutes()).padStart(2, '0');
  const seconds = String(d.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};



const showDialog = (row) => {
  inex_data.value = row.content
  console.log(inex_data)
}

articleList();
</script>   
<template>
    <div class="app">
      <!-- 蓝色条 -->
      <el-header class="header">
        <div class="header-left">
          <el-button @click="openMessageBoard" type="primary">留言</el-button>
        </div>
        <div class="header-center">
          <h1>小区维修系统</h1>
        </div>
        <div class="header-right">
          <el-button @click="openLogin" type="primary" v-if="!role_data">登录</el-button>
          <el-button @click="router.push('/home')" type="primary" v-if="role_data">后台</el-button>
        </div>
      </el-header>
  
      <!-- 轮播图 -->
      <el-carousel :interval="4000" type="card" height="500px;" style="margin-top: 20px;">
        <el-carousel-item v-for="item in carouselItems" :key="item">
          <img :src="item.image" alt="carousel-image" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
  
      <!-- 三个区域展示（社区公告、维修通知、安全提醒） -->
      <div class="list-container">
        <el-row :gutter="20">
          <!-- <el-col :span="8" v-for="(list, index) in [gongao, weixiu, tixing]" :key="index">
            <el-card :header="list[0].title" class="list-card">
              <ul>
                <li
                  v-for="(item, i) in list"
                  :key="i"
                  @click="viewDetail(list[0].title, item)"
                  class="list-item"
                >
                  <div class="item-title">{{ item.title }}</div>
                  <div class="item-content">{{ item.content }}</div>
                  <div class="item-time">{{ item.createTime }}</div>
                </li>
              </ul>
            </el-card>
          </el-col> -->

          <el-col :span="8" v-for="item in gongao" :key=" index">
          <el-card header="社区公告" class="list-card">
            <ul>
              <li @click="viewDetail('社区公告', item)" class="list-item">
                <div class="item-title">{{ item.title }}</div>
                <div class="item-content">{{ item.content }}</div>
                <div class="item-time">{{ formatDate(item.createdAt) }}</div>
              </li>
            </ul>
          </el-card>
        </el-col>

        <!-- 维修通知 -->
        <el-col :span="8" v-for="item in weixiu" :key="'weixiu-' + index">
          <el-card header="维修通知" class="list-card">
            <ul>
              <li @click="viewDetail('维修通知', item)" class="list-item">
                <div class="item-title">{{ item.title }}</div>
                <div class="item-content">{{ item.content }}</div>
                <div class="item-time">{{ formatDate(item.createdAt) }}</div>
              </li>
            </ul>
          </el-card>
        </el-col>

        <!-- 安全提醒 -->
        <el-col :span="8" v-for="item in tixing" :key="'anquan-' + index">
          <el-card header="安全提醒" class="list-card">
            
            <ul>
              <li @click="viewDetail('安全提醒', item)" class="list-item">
                <div class="item-title">{{ item.title }}</div>
                <div class="item-content">{{ item.content }}</div>
                <div class="item-time">{{ formatDate(item.createdAt) }}</div>
              </li>
            </ul>
          </el-card>
        </el-col>
        </el-row>
      </div>
  
      <!-- 留言板弹出框 -->
        <el-dialog v-model="messageDialogVisible" title="留言板" width="500px" class="custom-dialog">
            <el-input v-model="message" type="textarea" placeholder="请输入留言..." rows="6"></el-input>
            <div slot="footer" class="dialog-footer">
            <el-button @click="messagedialogVisible.value = false" class="cancel-btn">取消</el-button>
            <el-button type="primary" @click="submitMessage" class="submit-btn">提交</el-button>
            </div>
        </el-dialog>

        <!-- 详细信息弹出框 -->
        <el-dialog v-model="detailDialogVisible" title="详细信息" width="500px" class="custom-dialog" #default="{ row }">
            <p>{{ detailedInfo }}</p>
            <div slot="footer" class="dialog-footer">
            <el-button @click="detaildialogVisible.value = false,showDialog(row)" class="close-btn">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
  
  
  <style scoped>

  /* 覆盖 el-carousel 默认的 overflow: hidden; */
.el-carousel--horizontal,
.el-carousel--vertical {
  overflow: visible !important;
}


.custom-dialog .el-dialog__header {
  background-color: #409EFF;
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 20px;
}

.custom-dialog .el-dialog__body {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.custom-dialog .el-input__inner {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  padding: 12px;
  font-size: 14px;
}

.dialog-footer {
  text-align: right;
}

.cancel-btn,
.submit-btn,
.close-btn {
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 14px;
}

.cancel-btn {
  background-color: #f4f4f4;
  color: #409EFF;
  border: 1px solid #dcdfe6;
}

.cancel-btn:hover {
  background-color: #f0f0f0;
}

.submit-btn {
  background-color: #409EFF;
  color: white;
  border: none;
}

.submit-btn:hover {
  background-color: #66b1ff;
}

.close-btn {
  background-color: #f4f4f4;
  color: #333;
  border: 1px solid #dcdfe6;
}

.close-btn:hover {
  background-color: #f0f0f0;
}

/* 动画效果 */
.el-dialog__wrapper {
  transition: transform 0.3s ease, opacity 0.3s ease;
}


  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  
  .app {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #409EFF;
    color: white;
  }
  
  .header-left,
  .header-center,
  .header-right {
    display: flex;
    align-items: center;
  }
  
  .header-left {
    margin-right: 10px;
  }
  
  .header-center {
    flex-grow: 1;
    justify-content: center;
    text-align: center;
  }
  
  h1 {
    font-size: 24px;
  }
  
  .el-button {
    margin-left: 10px;
  }
  
  .carousel-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  
  .list-container {
    padding: 20px;
  }
  
  .list-card {
    margin-bottom: 20px;
    width: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .el-col {
    display: flex;
    justify-content: center;
  }
  
  .list-item {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
  }
  
  .list-item:hover {
    background-color: #f2f6fc;
    transform: scale(1.05);
  }
  
  .item-title {
    font-size: 16px;
    font-weight: bold;
  }
  
  .item-content {
    color: #666;
    font-size: 14px;
    margin: 5px 0;
    white-space: nowrap;      /* 防止换行 */
  overflow: hidden;         /* 超出的文本会被隐藏 */
  text-overflow: ellipsis;  /* 溢出部分使用省略号表示 */
  width: 100%;              /* 可以根据需要调整宽度 */
  display: inline-block;    /* 保证块级元素在水平排列时不影响布局 */
  }
  
  .item-time {
    font-size: 12px;
    color: #999;
  }
  
  .el-button {
    margin-right: 10px;
  }
  </style>
  